/* logo显示事件 */
window.addEventListener('load',() => {
	let logo_1 = document.querySelector('.logo');
	let logo_2 = document.querySelector('.logo_none');
	logo_1.addEventListener("mouseenter",() => {
		logo_2.style.display = 'block';
	})
	logo_1.addEventListener("mouseleave",() => {
		logo_2.style.display = 'none';
	})
})

/* 滚动监听显示固定导航栏 */
window.addEventListener('load',()=> {
	document.addEventListener('scroll',() => {
		let fixed_nav = document.querySelector('.fixed_nav');
		if (window.pageYOffset >= 400){
			fixed_nav.style.display = 'block';
		} else {
			fixed_nav.style.display = 'none';
		}
	})
})

/* 监听鼠标经过PPT四模块事件 */
window.addEventListener("load",() => {
	let PPTS = document.querySelector(".imgs");
	for (let i=0;i<PPTS.children.length;i++) {
		PPTS.children[i].addEventListener('mouseenter',() => {
			PPTS.children[i].querySelector("a").style.animation = "moves .5s forwards";
		});
		PPTS.children[i].addEventListener('mouseleave',() => {
			PPTS.children[i].querySelector("a").style.animation = "";
		});
	}
})

/* currte类的添加 排它思想*/
window.addEventListener('load',() => {
	let PT1 = document.querySelector('.PT1');
	let PT2 = PT1.parentElement.nextElementSibling;
	let EX1 = document.querySelector('.EX1');
	let EX2 = EX1.parentElement.nextElementSibling;
	let WD1 = document.querySelector('.WD1');
	let WD2 = WD1.parentElement.nextElementSibling;
	for (let i=0;i<PT1.children.length;i++) {
		/* 为每个小li设置自定义属性（索引号） */
		PT1.children[i].setAttribute('data-indexd',i);
		PT1.children[i].addEventListener('mouseenter',() =>{
			for (let j=0;j<PT1.children.length;j++) {
				PT1.children[j].classList.remove('currte');
			}
			PT1.children[i].classList.add('currte');
			let cut = PT1.querySelector('.currte').getAttribute('data-indexd');
			for(let k=0;k<PT2.children.length;k++){
				PT2.children[k].style.display = 'none';
			}
			PT2.children[cut].style.display = 'block';
			/* if (cut == 0) {
				for(let k=0;k<PT2.children.length;k++){
					PT2.children[k].style.display = 'none';
				}
				PT2.children[0].style.display = 'block';
			} else if(cut == 1){
				for(let k=0;k<PT2.children.length;k++){
					PT2.children[k].style.display = 'none';
				}
				PT2.children[1].style.display = 'block';
			} else if(cut == 2){
				for(let k=0;k<PT2.children.length;k++){
					PT2.children[k].style.display = 'none';
				}
				PT2.children[2].style.display = 'block';
			} else {
				for(let k=0;k<PT2.children.length;k++){
					PT2.children[k].style.display = 'none';
				}
				PT2.children[3].style.display = 'block';
			} */
		})
	}

	for (let i=0;i<PT1.children.length;i++) {
		/* 为每个小li设置自定义属性（索引号） */
		EX1.children[i].setAttribute('data-indexd',i);
		EX1.children[i].addEventListener('mouseenter',() =>{
			for (let j=0;j<EX1.children.length;j++) {
				EX1.children[j].classList.remove('currte');
			}
			EX1.children[i].classList.add('currte');
			let cut = EX1.querySelector('.currte').getAttribute('data-indexd');
			for(let k=0;k<EX2.children.length;k++){
				EX2.children[k].style.display = 'none';
			}
			EX2.children[cut].style.display = 'block';
		})
	}

	for (let i=0;i<PT1.children.length;i++) {
		/* 为每个小li设置自定义属性（索引号） */
		WD1.children[i].setAttribute('data-indexd',i);
		WD1.children[i].addEventListener('mouseenter',() =>{
			for (let j=0;j<WD1.children.length;j++) {
				WD1.children[j].classList.remove('currte');
			}
			WD1.children[i].classList.add('currte');
			let cut = WD1.querySelector('.currte').getAttribute('data-indexd');
			for(let k=0;k<WD2.children.length;k++){
				WD2.children[k].style.display = 'none';
			}
			WD2.children[cut].style.display = 'block';
		})
	}

	/* for (let i=0;i<EX1.children.length;i++) {
		EX1.children[i].addEventListener('mouseenter',() =>{
			for (let j=0;j<EX1.children.length;j++) {
				EX1.children[j].classList.remove('currte');
			}
			EX1.children[i].classList.add('currte');
		})
	} */

	/* for (let i=0;i<WD1.children.length;i++) {
		WD1.children[i].addEventListener('mouseenter',() =>{
			for (let j=0;j<WD1.children.length;j++) {
				WD1.children[j].classList.remove('currte');
			}
			WD1.children[i].classList.add('currte');
		})
	} */
})

/* 侧边栏返回顶部 */
window.addEventListener('load',() => {
	let lic = document.querySelector('.back');
    //动画函数
    function animate(obj, target, callback) {
        clearInterval(obj.time);
        obj.time = setInterval(function () {
            var step = (target - window.pageYOffset) / 10;//取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                clearInterval(obj.time);
            }
            //obj.style.left = window.pageYOffset + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 15)
        callback && callback();
    };
    lic.addEventListener('click', function () {
        animate(window, 0);
    })
})

/* 导航栏的详情 */
window.addEventListener('load',()=>{
	let ul = document.querySelector('.nav_ul');
	for(let i=0;i<ul.children.length-1;i++) {
		ul.children[i].children[0].addEventListener('mouseenter',()=>{
			for(let j=0;j<ul.children.length-1;j++){
				ul.children[i].children[1].style.display = 'none';
			}
			ul.children[i].children[1].style.display = 'block';
		})
		ul.children[i].addEventListener('mouseleave',()=>{
			ul.children[i].children[1].style.display = 'none';
		})
	}
	let query = document.querySelector('.query');
	let qb = query.previousElementSibling.previousElementSibling.previousElementSibling;
	qb.addEventListener('mouseenter',()=>{
		query.style.display = 'block';
	});
	query.addEventListener('mouseleave',()=>{
		query.style.display = 'none';
	});
	/* 搜索框的详情 */
	let ps = document.querySelector('.put1');
	let sp = document.querySelector('.search_content');
	ps.addEventListener('focus',()=>{
		let gh = document.querySelector('.ajax');
		gh.style.display = 'none';
		sp.style.display = 'block';
	})
	ps.addEventListener('blur',()=>{
		sp.style.display = 'none';
	})
	
})

/* 三大模板的喜欢与收藏 */
window.addEventListener('load',() =>{
	let cont = document.querySelectorAll('.all');
	/* for (let i=0;i<3;i++){
		for (let j=0;j<4;j++) {
			cont[i].children[j].style.display = 'none';
		}
		cont[i].children[0].children[0].style.display = 'block';
	}
	console.log(cont[0]);
	console.log(cont[0].children[1].children[0]); */
	//console.log(cont);
	for(let i=0;i<cont.length;i++) {
		//console.log(cont[i].children[0]);
		for (let j=0;j<cont[i].children.length;j++){
			for (let k=0;k<4;k++){
				cont[i].children[j].children[0].children[k].addEventListener('mouseenter',()=>{
					cont[i].children[j].children[0].children[k].children[2].style.display = 'block';
				})
				cont[i].children[j].children[0].children[k].addEventListener('mouseleave',()=>{
					cont[i].children[j].children[0].children[k].children[2].style.display = 'none';
				})
			}
		}
	}
	/* for (let i=0;i<cont.length;i++) {
		for (let j=0;j<4;j++) {
			cont[i].children[0].children[0].children[j].addEventListener('mouseenter',()=>{
				cont[i].children[0].children[0].children[j].querySelector('div').style.display = 'block';
				console.log(cont[i].children[0].children[0].children[j].querySelector('div').getAttribute("data-index"));
			})
			cont[i].children[0].children[0].children[j].addEventListener('mouseleave',()=>{
				cont[i].children[0].children[0].children[j].querySelector('div').style.display = 'none';
			})
		}
	} */
})

/* 登录模块功能 */
window.addEventListener('load',()=>{
	let close = document.querySelector('.right').querySelector('span');
	let bgc = document.querySelector('.background');
	let dl = document.querySelector('.denglu')
	let logi = document.querySelector('.login').querySelectorAll('a');
	let login = document.querySelector('.fixed_nav').querySelector('.login').querySelectorAll('a');
	//console.log(login);
	close.addEventListener('click',()=>{
		dl.style.animation = 'slc .5s';
		setTimeout(()=>{
			bgc.style.display = 'none';
			dl.style.animation = 'scl 1s';
		},480)
	})
	for (let i=0;i<logi.length;i++) {
		logi[i].addEventListener('click',()=>{
			bgc.style.display = 'block';
		})
	}
	for (let i=0;i<login.length;i++) {
		login[i].addEventListener('click',()=>{
			bgc.style.display = 'block';
		})
	}
})

/* 友情链接的切换 */
window.addEventListener('load',()=>{
	let friend = document.querySelector('.list_friend').children[0].children[0];
	let body0 =  document.querySelector('.list_friend').children[0].nextElementSibling;
	//console.log(body0);
	let body1 = document.querySelector('.none');
	//console.log(body1);
	//console.log(friend);
	friend.children[0].addEventListener('mouseenter',()=>{
		friend.children[1].style.color = 'black';
		friend.children[0].style.color = '#0078f8';
		body0.style.display = 'block';
		body1.style.display = 'none';
	})
	friend.children[1].addEventListener('mouseenter',()=>{
		friend.children[0].style.color = 'black';
		friend.children[1].style.color = '#0078f8';
		body1.style.display = 'block';
		body0.style.display = 'none';
	})
})

/* 网页轮播图实现 */
window.addEventListener('load',()=>{
	let section = document.querySelector('.lbtmk');
	let ul = section.children[0];
	//console.log(ul);
	let lis = section.querySelector('.tab_yuan');
	let button = section.querySelector('.btns');
	let prev = section.querySelector('.prev');
	let next = section.querySelector('.next');
	let num = 0;
	let sce = 0;
	let width = section.offsetWidth;
	//动画函数
    function move(obj, target, callback) {
		clearInterval(obj.time);
		obj.time = setInterval(function () {
				var step = (target - obj.offsetLeft) / 10;//取整
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				if (obj.offsetLeft == target) {
					clearInterval(obj.time);
				}
				obj.style.left =obj.offsetLeft + step + 'px';
		},15)
		callback && callback();
	};

	/* 鼠标经过轮播图区域左右按钮的显示与隐藏 */
	section.addEventListener('mouseenter',()=>{
		button.style.display = 'block';
		clearInterval(timer);
		timer = null;
	})
	section.addEventListener('mouseleave',()=>{
		button.style.display = 'none';
		timer = setInterval(() => {
			next.click();
		}, 2000);
	})
	/* 通过轮播图片的数量动态生成小圆点的个数 */
	//console.log(section.children[0].children.length);
	for(let i=0;i<section.children[0].children.length;i++){
		/* 创建li并创建自定义属性索引号插入ul里面 */
		let li = document.createElement('li');
		//console.log(lis);
		li.setAttribute('index',i);
		lis.children[0].appendChild(li);
		/* 绑定li的点击事件 */
		li.addEventListener('click',()=>{
			/* 圆点背景色的变化 */
			for(let i=0;i<section.children[0].children.length-1;i++){
				lis.children[0].children[i].classList.remove('currens');
			}
			li.classList.add('currens');
			/* 图片的移动 移动距离是小圆点的索引号乘上图片的宽度*/
			/* 获取元素宽度以及点击li的索引号 */
			let index = li.getAttribute('index');
			//console.log(index);
			//console.log(width);
			move(ul,-index * width)
			num = index;
			sce = index;
		})
	}
	/* 第一个小圆点添加currens类 */
	lis.children[0].children[0].classList.add('currens');
	/* 克隆第一张图片 */
	let first = ul.children[0].cloneNode(true);
	ul.appendChild(first);
	/* 添加左右按钮的切图效果 */
	
	prev.addEventListener('click',()=>{
		if (num == 0){
			//console.log(num = lis.children[0].children.length -1);
			num = lis.children[0].children.length - 1;
			ul.style.left = -num * width + 'px';
		}
		num--;
		move(ul,-num*width);
		sce--;
		/* 判断 */
		if (sce < 0) {
			sce = lis.children[0].children.length -1 ;
		}
		opo();
	})
	next.addEventListener('click',()=>{
		if (num == lis.children[0].children.length){
			ul.style.left = 0;
			num = 0;
		}
		num++;
		move(ul,-num*width);
		sce++;
		/* 判断 */
		if (sce == lis.children[0].children.length) {
			sce = 0;
		}
		opo();
	})
	/* 切换小圆点 */
	function opo() {
		for (let i=0;i<lis.children[0].children.length;i++){
			lis.children[0].children[i].classList.remove('currens');
		}
		lis.children[0].children[sce].classList.add('currens');
	}

	/* 自动换图功能 */
	let timer = setInterval(() => {
		next.click();
	}, 4000);

	window.addEventListener('resize',()=>{
		clearInterval(timer);
		timer = 'none';
		width = section.offsetWidth;
		lis.children[0].children[0].click();
		setTimeout(() => {
			timer = setInterval(() => {
				next.click();
			}, 4000);
		}, 3000);
	})
})

/* 侧边栏功能完善 */
window.addEventListener('load',()=>{
	let zq =  document.querySelector('.cbl_zq');
	let zhuanqian = zq.nextElementSibling.children[1];
	let kf = document.querySelector('.cbl_kf');
	let kefu = zq.nextElementSibling.children[2];
	zhuanqian.addEventListener('mouseenter',()=>{
		kf.style.display = 'none';
		zq.style.display = 'block';
		setTimeout(() => {
			kf.style.display = 'none';
			zq.style.display = 'none';
			}, 4000);
	});
	zq.addEventListener('mouseleave',()=>{
		zq.style.display = 'none';
	});
	kefu.addEventListener('mouseenter',()=>{
		zq.style.display = 'none';
		kf.style.display = 'block';
		setTimeout(() => {
			kf.style.display = 'none';
			zq.style.display = 'none';
			}, 4000);
	});
	kf.addEventListener('mouseleave',()=>{
		kf.style.display = 'none';
	});
	zhuanqian.previousElementSibling.addEventListener('mouseenter',()=>{
		kf.style.display = 'none';
		zq.style.display = 'none';
	})
	kefu.nextElementSibling.addEventListener('mouseenter',()=>{
		kf.style.display = 'none';
		zq.style.display = 'none';
	})
})

/* 固定导航栏的详情列表显示 */
window.addEventListener('load',()=>{
	let gh = document.querySelector('.query1');
	let a1 = document.getElementById('a1');
	a1.addEventListener('mouseenter',()=>{
		gh.style.display = 'block';
	});
	gh.addEventListener('mouseleave',()=>{
		gh.style.display = 'none';
	})
})


/* 搜索框通过node.js链接数据库，通过ajax发送get请求到服务器获得数据库中的数据 */
window.addEventListener('load',()=>{
        const divs = document.querySelector('.ajax');
        const btn = document.querySelector('.sech');
        const put1 = document.querySelector('.put1');
        let xhr = null,a = null;
		/* divs.addEventListener('mouseleave',()=>{
			setTimeout(()=>{
				divs.style.display = 'none';
			})
		},20000) */
        btn.addEventListener('click', function () {
			divs.style.display = 'block';
			if (put1.value == 'ppt'||put1.value == 'PPT') {
				var a = 'ppt';
			} else if(put1.value == 'word'||put1.value == 'WORD') {
				var a = "word";
			} else if(put1.value == 'excel'||put1.value == 'EXCEL') {
				var a = 'excel';
			} else {
				var a = 'kon'
			}
			console.log(a);
			setTimeout(()=>{
				//第一步发送请求
			xhr = new XMLHttpRequest();
			//第二步设置请求类型和url
			xhr.open('GET',"http://127.0.0.1:8000/index-"+a);
			//第三步 发送
			xhr.send();
			// 事件绑定
			xhr.onreadystatechange = function () {
				if (xhr.readyState === 4) {
					if (xhr.status >= 200 && xhr.status < 300) {
						//处理返回结果
						let string = xhr.response;
						if (xhr.response!='很抱歉没有找到你要的数据') {
							string = ` `;
							divs.innerHTML = xhr.response;
                                let str = JSON.parse(xhr.response);
                                for (let i=0;i<str.length;i++) {
                                string += `<p>`+str[i].name+`</p>`;
                            }
						}
						divs.innerHTML = string;
					}
				}
			}
			},100)
        });
})



